<template>
  <div>
   <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>参数管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区 -->
    <el-card>
      <!-- 按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <!-- 分类名称 -->
      <tree-table class="treeTable" :data="cateList" :columns="cols" :selection-type="false"
      show-index index-text="#" :expand-type="false" border :show-row-hover="false">
      <!-- 是否有效区域 -->
      <template slot="isok" slot-scope="scope">
        <i v-if="scope.row.cat_deleted==false" style="color:lightGreen" class="el-icon-success"></i>
        <i v-else style="color:red" class="el-icon-error"></i>
      </template>
      <!-- 菜单区域 -->
      <template slot="order" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level==0" type="primary">一级菜单</el-tag>
        <el-tag v-else-if="scope.row.cat_level==1" type="danger">二级菜单</el-tag>
        <el-tag v-else type="warning">三级菜单</el-tag>
      </template>
      <!-- 按钮区域 -->
      <template slot="opt" slot-scope="scope">
        <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditParams(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="delParams(scope.row.cat_id)">删除</el-button>
      </template>
      </tree-table>

      <!-- 分页区域 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryData.pagenum"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="queryData.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="isShowCateDialogShow" width="50%" @close="resetCateForm">
      <el-form ref="formAddCateRef" :model="addCateForm" :rules="addCateRules" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
         <el-form-item label="父级分类" prop="cat_name">
           <el-cascader
              class="cascader" v-model="selectedCates" :options="parerntCateList" clearable
              :props="{ expandTrigger: 'hover',
                        checkStrictly:true,
                        label:'cat_name',
                        value:'cat_id',
                        children:'children' }"
              @change="handleChange">
           </el-cascader>
         </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowCateDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑分类对话框 -->
    <el-dialog title="编辑分类" :visible.sync="isShowEditCDialogShow" width="50%" @close="closeEditDialog">
      <el-form ref="formEditCateRef" :model="EditCateForm" :rules="EditCateRules" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="EditCateForm.cat_name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowEditCDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 查询条件
      queryData: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      // 商品分类的数据列表，默认为空
      cateList: [],
      total: 0,
      // 编辑表单
      EditCateForm: {
        cat_id: '',
        cat_name: ''
      },
      // 设置添加对话框是否显示
      isShowCateDialogShow: false,
      // 设置编辑对话框是否显示
      isShowEditCDialogShow: false,
      // 父级分类数据列表
      parerntCateList: [],
      // 添加分类时，选中的 父级类的 id
      selectedCates: [],
      // 添加 类别用的表单数据对象
      addCateForm: {
        // 将要添加分类的名称
        cat_name: '',
        // 添加父级分类ID
        cat_pid: 0,
        // 分类的等级，默认是一级分类
        cat_level: 0
      },
      // 添加分类规则
      addCateRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }]
      },
      // 编辑分类规则
      EditCateRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }]
      },
      cols: [{
        label: '分类名称',
        prop: 'cat_name'
      }, {
        label: '是否有效',
        // 表示当前定义的模板列
        type: 'template',
        // 表示当前行使用的模板名称
        template: 'isok'
      }, {
        label: '排序',
        // 表示当前定义的模板列
        type: 'template',
        // 表示当前行使用的模板名称
        template: 'order'
      },
      {
        label: '操作',
        // 表示当前定义的模板列
        type: 'template',
        // 表示当前行使用的模板名称
        template: 'opt'
      }
      ]
    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    // 点击按钮 删除分类
    async delParams (id) {
      this.$messageBox.confirm('确认删除?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: async (action) => {
          // 如果点击取消按钮，则停止执行函数
          if (action === 'cancel') return
          // 发起请求 删除分类
          const { data: res } = await this.$http.delete(`categories/${id}`)
          // 如果删除失败，弹出错误
          if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
          // 如果成功，渲染页面
          this.$message.success(res.meta.msg)
          this.getCateList()
        }
      })
    },
    // 点击按钮，显示编辑分类对话框
    showEditParams (row) {
      this.EditCateForm.cat_name = row.cat_name
      this.EditCateForm.cat_pid = row.cat_id
      this.isShowEditCDialogShow = true
    },
    // 点击按钮，修改按钮分类
    editCate () {
      // 验证表单
      this.$refs.formEditCateRef.validate(async (valid) => {
        if (!valid) return
        // 发起请求 编辑分类
        const { data: res } = await this.$http.put(`categories/${this.EditCateForm.cat_pid}`,
          { cat_name: this.EditCateForm.cat_name })
        // 如果修改失败，弹出失败提示
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        // 如果成功
        this.$message.success(res.meta.msg)
        // 关闭对话窗口
        this.isShowEditCDialogShow = false
        // 重新渲染页面
        this.getCateList()
      })
    },
    // 监听编辑对话框的关闭事件
    closeEditDialog () {
      // 关闭窗口
      this.isShowEditCDialogShow = false
      // 将表单清空
      this.$refs.formEditCateRef.resetFields()
    },
    // 添加分类
    addCate () {
      // 验证表单数据是否符合规则
      this.$refs.formAddCateRef.validate(async (valid) => {
        if (!valid) return
        // 发起请求，增加分类
        const { data: res } = await this.$http.post('categories', this.addCateForm)
        // 如果 获取失败 弹出错误
        if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
        this.$message.success(res.meta.msg)

        // 关闭 对话框
        this.isShowCateDialogShow = false
        // 更新表格数据
        // this.getCateList()
        // 优化方案：
        // 如果 当前页码 是最后一页 则调用 getCateList 重新请求当前页数据
        const totalPage = Math.ceil(this.total / this.queryData.pagesize)
        if (this.queryData.pagenum === totalPage) {
          this.getCateList()
        } else {
          // 如果 当前页码不是最后一页，则不需要重复当前页总数据
          // 只需要修改 total 重新计算当前页码
          if (this.addCateForm.cat_level === 0) {
            this.total++
          } else {
            this.getCateList()
          }
        }
        // 重置表单数据
        this.resetCateForm()
      })
    },
    // 关闭新增分类 对话框函数
    resetCateForm () {
      this.addCateForm.cat_name = ''
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
      this.selectedCates = []
    },
    // 新增分类对话框中，父级下拉框 状态改变事件
    handleChange () {
      // 1.每次 分类选项 发生改变时 更新 表单数据
      if (this.selectedCates.length === 0) {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
        // 2.如果 选择了 1个父分类 说明添加的是(二级分类)
      } else if (this.selectedCates.length === 1) {
        this.addCateForm.cat_pid = this.selectedCates[0]
        this.addCateForm.cat_level = 1
        // 3.如果 选择了 2个父分类 说明添加的是(三级分类)
      } else if (this.selectedCates.length === 2) {
        this.addCateForm.cat_pid = this.selectedCates[1]
        this.addCateForm.cat_level = 2
      }
    },
    async showAddCateDialog () {
      // 显示新增分类对话框，并加载父级分类数据
      this.isShowCateDialogShow = true
      // 加载父级分类数据
      const { data: res } = await this.$http.get('categories', {
        params: { type: 2 }
      })
      // 如果加载失败
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // 如果加载成功
      this.parerntCateList = res.data
    },
    // 获取分类数据
    async getCateList () {
      // 发起请求，获取分类数据
      const { data: res } = await this.$http.get('categories', { params: this.queryData })
      // 判断是否有问题
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // // 保存 分类数据
      this.cateList = res.data.result
      // 如果成功 保存总数据行数
      this.total = res.data.total
    },
    // 监听页面页容量的 size 变化
    handleSizeChange (newSize) {
      // 修改 查询参数中 的 页容量
      this.queryData.pagesize = newSize
      // 调用函数重新渲染数据
      this.getCateList()
    },
    handleCurrentChange (curPageIndex) {
      // 修改 查询参数中 的 当前页面页码
      this.queryData.pagenum = curPageIndex
      // 重新查询 数据
      this.getCateList()
    }
  }
}
</script>
<style lang="less" scoped>
.treeTable{
  margin-top: 15px;
}
.cascader{
  width: 100%;
}
</style>
